<template>
  <div class="marketing-management">
    <div class="page-header">
      <h2>营销管理</h2>
      <el-button type="primary" @click="createPromotion">创建活动</el-button>
    </div>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="优惠活动" name="promotions">
        <el-table :data="promotions" style="width: 100%">
          <el-table-column prop="name" label="活动名称" />
          <el-table-column prop="type" label="活动类型" />
          <el-table-column prop="startTime" label="开始时间" />
          <el-table-column prop="endTime" label="结束时间" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
                {{ scope.row.status === 'active' ? '进行中' : '已结束' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" @click="editPromotion(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deletePromotion(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="优惠券管理" name="coupons">
        <el-table :data="coupons" style="width: 100%">
          <el-table-column prop="code" label="优惠码" />
          <el-table-column prop="discount" label="优惠金额" />
          <el-table-column prop="minPurchase" label="最低消费" />
          <el-table-column prop="validUntil" label="有效期" />
          <el-table-column prop="usageCount" label="使用次数" />
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" @click="editCoupon(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteCoupon(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const activeTab = ref('promotions');

// 模拟数据
const promotions = ref([
  {
    name: '双11大促',
    type: '折扣活动',
    startTime: '2024-11-01',
    endTime: '2024-11-12',
    status: 'active'
  },
  {
    name: '年终特惠',
    type: '满减活动',
    startTime: '2024-12-20',
    endTime: '2024-12-31',
    status: 'inactive'
  }
]);

const coupons = ref([
  {
    code: 'FIRST100',
    discount: 100,
    minPurchase: 1000,
    validUntil: '2024-12-31',
    usageCount: 50
  },
  {
    code: 'NEW2024',
    discount: 50,
    minPurchase: 500,
    validUntil: '2024-06-30',
    usageCount: 30
  }
]);

const createPromotion = () => {
  ElMessage.success('创建活动功能待实现');
};

const editPromotion = (promotion) => {
  ElMessage.success('编辑活动功能待实现');
};

const deletePromotion = (promotion) => {
  ElMessage.success('删除活动功能待实现');
};

const editCoupon = (coupon) => {
  ElMessage.success('编辑优惠券功能待实现');
};

const deleteCoupon = (coupon) => {
  ElMessage.success('删除优惠券功能待实现');
};
</script>

<style scoped>
.marketing-management {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

h2 {
  margin: 0;
  color: #2c3e50;
}
</style> 